<template>
	<view class="my_page padding20" :style="{'background-image': `url(${Http_url}/static/images/index_bg.png)`}">
		<view class="content bgWhite shadow radius14">
			<view class="barbox shadow radius14 padding20 acea-row row-between-wrapper ">
				<view class="back blod600" @click="back">
					<text class="iconfont icon-zuo size12" style="padding-right: 10rpx;"></text>
					<text class="txt font_medium">返回</text>
				</view>
				<view class="title size18 font_bold blod600">视频数据</view>
				<view class="refresh yellow" @click="getVoidWathLog">
					<text class="iconfont icon-shuaxin size18"></text>
					<text style="margin-left: 10rpx;">刷新</text>
				</view>
			</view>
			<view class="videoinfo padding20">
				<view class="list-item margint20 acea-row row-between-wrapper">
					<view class="avatar">
						<image :src="adminUrl+videoInfo.vi_img"></image>
					</view>
					<view class="info">
						<view class="name font_medium blod600 ellipsis">{{videoInfo.title}}</view>
						<view class="time size12 hui">{{videoInfo.kb_date}}</view>
						<view class="batch size12 hui">起播批次：{{videoInfo.ba_title}}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="content bgWhite shadow radius14 padding20" style="margin-top: 40rpx;">
			<view class="title">
				<text class="iconfont icon-shuju" style="padding-right: 10rpx;"></text>
				<text class="txt font_medium blod600">直播数据</text>
			</view>
			<view class="menu-box acea-row paddingt10">
				<block v-for="(menu,m) in liveData" :key="m">
					<view class="menu-item acea-row row-middle" :style="{'background': `linear-gradient(180deg, ${menu.color1} 0%, ${menu.color2} 100%)`}">
						<view class="item-mid">
							<view class="num size24 font_bold blod600">{{menu.num}}<text v-if="m==3" class="size12">%</text></view>
							<view class="txt hui size12">{{menu.name}}</view>
						</view>
					</view>
				</block>
			</view>
		</view>
		<view class="content bgWhite shadow radius14 margint20 padding20" style="margin-top: 40rpx; margin-bottom: 40rpx;">
			<view class="title">
				<text class="iconfont icon-ziguanjilu" style="padding-right: 10rpx;"></text>
				<text class="txt font_medium blod600">答题数据</text>
			</view>
			<view class="menu-box acea-row paddingt10">
				<block v-for="(menus,mm) in answerData" :key="mm">
					<view class="menu-item acea-row row-middle" :style="{'background': `linear-gradient(180deg, ${menus.color1} 0%, ${menus.color2} 100%)`}">
						<view class="item-mid">
							<view class="num size24 font_bold blod600">{{menus.num}}<text v-if="mm==2" class="size12">%</text></view>
							<view class="txt hui size12">{{menus.name}}</view>
						</view>
					</view>
				</block>
			</view>
		</view>
	</view>	
</template>

<script>
    import {Http_url} from '@/config/config.js'
	import { mapGetters } from "vuex";
	import nolist from "@/components/nolist.vue";
	import {void_wathindex_tow} from "@/api/video.js"
	import {Resource_url} from '@/config/config.js'
	export default {
		computed: mapGetters(['isLogin', 'globalData']),
		components: {
			nolist
		},
		data() {
			return {
                Http_url,
				adminUrl:Resource_url,
				vid:0,
				barHeight:0,
				videoInfo:{},
				liveData:[
					{
						num: "",
						name:'会员人数',
						color1:'#FFE5D5',
						color2:'#FFFAF7',
					},
					{
						num:"",
						name:'已观看人数',
						color1:'#D9FFD5',
						color2:'#FFFAF7',
					},
					{
						num:"",
						name:'未观看人数',
						color1:'#FFD5E8',
						color2:'#FFFAF7',
					},
					{
						num:"",
						name:'上线率',
						color1:'#D5F5FF',
						color2:'#FFFAF7',
					},
					{
						num:"",
						name:'完播次数',
						color1:'#D5D6FF',
						color2:'#FFFAF7',
					}
				],
				answerData:[
					{
						num:"",
						name:'答题人数',
						color1:'#FFF7D5',
						color2:'#FFFAF7',
					},
					{
						num:"",
						name:'答题正确次数',
						color1:'#F8D5FF',
						color2:'#FFFAF7',
					},
					{
						num:"",
						name:'答题正确占比',
						color1:'#FFD5D5',
						color2:'#FFFAF7',
					},
				]
			};
		},
		onLoad(option) {
			if(!option){
				this.$utils.Tips({
					title:'参数错误'
				},{
					tab:3
				})
			}else{
				this.vid = option.id
				this.barHeight=this.globalData.barHeight
				this.getVoidWathLog()
			}
		},
		methods: {
			back(){
				uni.navigateBack({
					delta: 1,
				})
			},
			getVoidWathLog(){
				let param={
					id:this.vid,
					is_gk:1
				}
                if(this.loading) return
                this.loading = true
				uni.showLoading()
				void_wathindex_tow(param).then(res => {
					this.videoInfo=res.vo_data
					let co_data = res.co_data[0]
					this.liveData[0].num=co_data.zong_user//会员人数
					this.liveData[1].num=co_data.zong_guankan//已观看人数
					this.liveData[2].num=co_data.zong_weican_user//未观看人数
					this.liveData[3].num=co_data.zong_shangxian_lv//上线率
					this.liveData[4].num=co_data.zong_wanbo//完播次数
					this.answerData[0].num=co_data.zong_dat//答题人数
					this.answerData[1].num=co_data.zong_dat_zheng//答题正确次数
					this.answerData[2].num=co_data.zong_dati_zheng_lv//答题正确但比
                    uni.hideLoading()
                     this.loading = false
				}).catch(err=>{
                    this.loading = false
                    uni.hideLoading()
					this.$utils.Tips({
						title:err
					})
				})
			}
		}
	}
</script>

<style lang="scss">
	.my_page{
		width: 100%;
		background-position: top;
		background-size: contain;
		background-repeat: no-repeat;
	}
	.content{
		.barbox{
			.title{	
				width: calc(100% - 240rpx);
				text-align: center;
			}
			.refresh{
				border: 2rpx #FEA40B solid;
				border-radius: 40rpx;
				padding: 8rpx 10rpx;
			}
		}
		.videoinfo{
			.list-item{
				.avatar{
					width: 144rpx;
					height: 144rpx;
					border-radius: 20rpx;
					overflow: hidden;
				}
				.info{
					width: calc(100% - 154rpx);
					margin-left: 10rpx;
					.time{
						padding: 10rpx 0;
					}
					.batch{
						display: inline-block;
						background: rgba(255,165,12,0.43);
						border-radius: 8rpx;
						padding: 6rpx 16rpx;
					}
				}
			}
		}
		.menu-box{
			.menu-item{
				width: 192rpx;
				height: 192rpx;
				border-radius: 36rpx;
				margin: 14rpx;
				text-align: center;
				.item-mid,.num,.txt{
					width: 100%;
				}
			}
		}
	}
</style>
